<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html" %>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Cù Lao Chàm</title>

<!--<link rel="stylesheet" type="text/css" href="css/TableTools.css" />

--><link rel="stylesheet" type="text/css" href="css/user.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.css"/>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"> </script>
<script type="text/javascript" src="script/jquery-1.6.1.min.js"> </script>
<script type="text/javascript" src="script/jquery.dataTables.js"></script>
<script type="text/javascript" src="script/TableTools.js"></script>
<script type="text/javascript" src="script/ZeroClipboard.js"></script>
<script type="text/javascript" src="script/dataTables.editor.js"></script>
<script type="text/javascript" src="script/jquery.jeditable.js"></script>
<script type="text/javascript" src="script/userControl.js" > </script>
<link rel="stylesheet" type="text/css" href="css/jquery-ui.css">
<script type="text/javascript" src="script/jquery-ui.js"></script>
<script type="text/javascript" src="script/userThongKe.js"></script>
<script type="text/javascript" src="script/contextmenu.js" > </script>
<script type="text/javascript" src="script/user.js" > </script>

</head>
<body>
	<img class = "image" src="image/culaochambanner.gif"/>
	<div id = "map-canvas"></div>
	<div id = "wrapper">
		<dl> 
			<dt><a href="#">Quản lý thực vật</a></dt>
			<dd>
				<input type="checkbox" name = "chkTVAll" id = "checkThucVat" class = "chkTVAll" style="margin-left: 15px;" onclick="displayPoinThucVat('checkThucVat');"> Check all
				<ul id = "thucVatMenu">
					<% 
						ArrayList<String> tv_ho = new ArrayList<String>();
					%>
					<logic:iterate id="thucVat" name="userForm" property="listThucVatModel">
						<bean:define id="ho" name="thucVat" property="tv_ho"/>
						<% 
							int i = 0;
							while(i < tv_ho.size() && !ho.equals(tv_ho.get(i)) ) i++;
								if(i == tv_ho.size()) {
									tv_ho.add((String)ho);
									%>
								<li id = "ho"> <span class="ho"> </span> <input type="checkbox" id = "${ho}" value="1" name = "${ho}" class = "chktv item1" onclick="displayPoinThucVat('${ho}');"> <%= ho %>
									<ul>
									<logic:iterate id="thucVat" name="userForm" property="listThucVatModel">
										<bean:define id="kt_ho" name="thucVat" property="tv_ho"/>																					
											<% if(ho.equals(kt_ho)) {%>												
												<li  id = "loai">
													<input type="checkbox" id = "${thucVat.tv_loai}" value="2" name = "${thucVat.tv_loai}" class="chktv" onclick="displayPoinThucVat('${thucVat.tv_loai}');"> <a href="#"> <bean:write name="thucVat" property="tv_loai"/> </a>
												</li>												
											<%} %>
										
									</logic:iterate>
									</ul>
								</li>
								<%}
						%>
					
					</logic:iterate>
				</ul>
			</dd>
			
			<dt><a href="#">Quản lý động vật</a></dt>
			<dd>
				<input type="checkbox" name = "chkDVAll" id = "checkDongVat" class = "chkDVAll" style="margin-left: 15px;" onclick="displayPoinDongVat('checkDongVat');"> Check all
				<ul id = "dongVat">
					<% 
						ArrayList<String> dv_ho = new ArrayList<String>();
					%>
					<logic:iterate id="dongVat" name="userForm" property="listDongVatModel">
						<bean:define id="ho" name="dongVat" property="dv_ho"/>
						<% 
							int i = 0;
							while(i < dv_ho.size() && !ho.equals(dv_ho.get(i)) ) i++;
								if(i == dv_ho.size()) {
									dv_ho.add((String)ho);
									%>
								<li id = "ho"> <span class="ho"> </span> <input type="checkbox" id = "${ho}" value="1" name = "${ho}" class = "chkdv item1" onclick="displayPoinDongVat('${ho}');"> <%= ho %>
									<ul>
									<logic:iterate id="dongVat" name="userForm" property="listDongVatModel">
										<bean:define id="kt_ho" name="dongVat" property="dv_ho"/>																					
											<% if(ho.equals(kt_ho)) {%>												
												<li  id = "loai">
													<input type="checkbox" id = "${dongVat.dv_loai}" value="2" name = "${dongVat.dv_loai}" class="chkdv" onclick="displayPoinDongVat('${dongVat.dv_loai}');"> <a href="#"> <bean:write name="dongVat" property="dv_loai"/> </a>
												</li>												
											<%} %>
										
									</logic:iterate>
									</ul>
								</li>
								<%}
						%>
					
					</logic:iterate>
				</ul>
			</dd>
			
			<dt><a href="#">Thống kê</a></dt>
			<dd>
				<div>
					<p><b>Thực vật</b></p>
						<div id = "divtktv">
						<!--xem tat ca thuc vat dang ton tai-->
						<span><a href="#" id = "viewAllThucVat" onclick="viewAllThucVat();"> Xem tất cả thực vật </a></span> <br>
						
						<!--lua chon loai thuc vat can xem-->
						<p>Chọn loài thực vật cần xem:</p>
						<select id = "selectLoaiTV" size="7">
							<logic:iterate id="thucVat" name="userForm" property="listThucVatModel">
							<option class = "thucvatLoai"><bean:write name="thucVat" property="tv_loai"/></option>
							</logic:iterate>
						</select>
						
						<!--the select chua cac thuc vat da chon-->
						<select id = "selectedLoaiTV" size="7">
							<option class = "thucvatLoai"></option>
						</select>
						<input type = "button" value = "Xem" onclick="viewSelectThucVat();"> <br>
						
						</div>
				</div>
				<hr>
				<div>
					<p><b>Động vật</b></p>
					 <div id = "divtkdv">
						<!--xem tat ca dong vat dang ton tai-->
						<span><a href="#" id = "viewAllDongVat" onclick="viewAllDongVat();"> Xem tất cả động vật </a></span> <br>
						
						<!--lua chon loai dong vat can xem-->
						<p>Chọn loài động vật cần xem:</p>
						<select id = "selectLoaiDV" size="7">
							<logic:iterate id="dongVat" name="userForm" property="listDongVatModel">
							<option class = "dongvatLoai"><bean:write name="dongVat" property="dv_loai"/></option>
							</logic:iterate>
						</select>
						
						<!--the select chua cac dong vat da chon-->
						<select id = "selectedLoaiDV" size="7">
							<option class = "dongvatLoai"></option>
						</select>
						<input type = "button" value = "Xem" onclick="viewSelectDongVat();"> <br>
						
						</div>
				</div>
				<hr>
				<div>
					<p><b>Thống kê theo vùng</b></p>
						<!--chon vung tren ban do de xem-->
						<span><a href="#" onclick = "getPointEventClick();">Chọn vùng</a></span>
						<input type = "button" value = "Xem" onclick="xemVungDaChon();"> <br>
				</div>
			</dd>
			
			<dt><a href="#">Thông tin chung</a></dt>
			<dd>
				<p>Chương trình quản lý tài nguyên sinh vật</p>
				<p>tại khu bảo tồn thiên nhiên Cù Lao Chàm</p>
				<p>---------------------------------------</p>
				<p>Trương Đình Thuận - 08T1</p>
			</dd>
			
		</dl>
	</div>
	
	<div id = "control">
		<table>
			<tr>
				<td style = "padding-top: 0px;">
					<input type="button" value="" id="pan" onclick="destroyEvent()" title="Pan"/>
					<input type="button" value="" id="measureDistance" onclick="measureDistance()" title="Measure Distance"/>
					<input type="button" value="" id="measureArea" onclick="measureArea()" title="Measure Area"/>
					<input type="button" value="" id="undo" onclick="undoLine()" title="Undo"/>
					<input type="button" value="" id="delete" onclick="refresh()" title="Delete"/>
					<input type="button" value="" id="print" onclick="printpage()" title="Print"/>
				</td>
				<td><input type="text" id = "measure" size="10px"></td>
				<td><span id = "distance"></span> </td>
			</tr>
		</table>		
	</div>

	<div id="thucVatDialog" style="font-size: 12px;">
		<table border="0" style="margin: 0px; padding: 0px; width: 110%"
			class="dataTables_thucVat" id="thucVatList">
			<thead>
				<tr>
					<th>STT</th>
					<th>Loài</th>
					<th>Họ</th>
					<th>Chiều cao</th>
					<th>Đường kính</th>
					<th>Độ tàn che</th>
					<th>Loại sinh trưởng</th>
					<th>Giá trị</th>
					<th>Dạng sống</th>
					<th>Đặc điểm</th>
					<th>Số Lượng</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
	
	<div id="dongVatDialog" style="font-size: 12px;">
		<table border="0" style="margin: 0px; padding: 0px; width: 120%"
			class="dataTables_dongVat" id="dongVatList">
			<thead>
				<tr>
					<th>STT</th>
					<th>Loài</th>
					<th>Họ</th>
					<th>Giới</th>
					<th>Ngành</th>
					<th>Lớp</th>
					<th>Bộ</th>
					<th>Chi</th>
					<th>Nơi sống</th>
					<th>Thức ăn</th>
					<th>Đặc điểm</th>
					<th>Số lượng</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
	</div>
	
	<div  id="sinhVatDialog" style="font-size: 12px;">
		<div>
		<table border="0" style="margin: 0px; padding: 0px; width: 120%" id="thucVatPolygon">
			<thead>
				<tr>
					<th>STT</th>
					<th>Loài</th>
					<th>Họ</th>
					<th>Chiều cao</th>
					<th>Đường kính</th>
					<th>Độ tàn che</th>
					<th>Loại sinh trưởng</th>
					<th>Giá trị</th>
					<th>Dạng sống</th>
					<th>Đặc điểm</th>
					<th>Số Lượng</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		</div>
	<br>
	<br>
	<hr style = "width: 120%; border: 1px solid #FF8900;" />
	<br>	
		<div>
		<table border="0" style="margin: 0px; padding: 0px; width: 120%" id="dongVatPolygon">
			<thead>
				<tr>
					<th>STT</th>
					<th>Loài</th>
					<th>Họ</th>
					<th>Giới</th>
					<th>Ngành</th>
					<th>Lớp</th>
					<th>Bộ</th>
					<th>Chi</th>
					<th>Nơi sống</th>
					<th>Thức ăn</th>
					<th>Đặc điểm</th>
					<th>Số lượng</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		</div>
	</div>
	
	<div id = "thongTinTV" style = "display: none;">
		<table>
			<tr>
				<td>
				<table>
					<tr>
						<td>Loài: <br><input type="text" id = "tvloai" ></td>
						<td>Họ: <br><input type="text" id = "tvho" ></td>
						<td>Chiều cao: <br>
							<select id = "sltvchieucao">
								<option id = "tvchieucao"></option>
								<option value="caytaisinh">Cây tái sinh</option>
								<option value="caybui">Cây bụi</option>
								<option value="duoitan">Dưới tán</option>
								<option value="tan">Tán</option>
								<option value="trentan">Trên tán</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Đường kính: <br>
							<select id="sltvduongkinh">
								<option id = "tvduongkinh"></option>
								<option value="lonhon10">Lớn hơn 10 cm</option>
								<option value="nhohon10">Nhỏ hơn 10 cm</option>
							</select>
						</td>
						<td>Loại sinh trưởng: <br>
							<select id = "sltvloaisinhtruong">
								<option id = "tvloaisinhtruong"></option>
								<option value="nhanh">Nhanh</option>
								<option value="cham">Trung bình</option>
								<option value="trungbinh">Chậm</option>
							</select>
						</td>
						<td>Dạng sống: <br>
							<select id="sltvdangsong">
								<option id = "tvdangsong"></option>
								<option value="golon"></option>
								<option value="golon">Gỗ lớn</option>
								<option value="gotrungbinh">Gỗ trung bình</option>
								<option value="gonho">Gỗ nhỏ</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Độ tàn che: </td>
						<td>+ Đông tây: <input type="text" id = "tvdongtay" > m</td>
						<td>+ Nam bắc: <input type="text" id = "tvnambac" > m</td>
					</tr>
					<tr>
						<td>Vị trí:</td>
						<td>+ Latatude: <input type="text" id = "tvlatatude" ></td>
						<td>+ Longatude: <input type="text" id = "tvlongatude" ></td>
					</tr>
					<tr>
						<td>Giá trị: </td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "tvgtgo"> Gỗ</td>
						<td><input type = "checkbox" id = "tvgtcanh"> Cảnh</td>
						<td><input type = "checkbox" id = "tvgtthuoc"> Thuốc</td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "tvgtvlxaydung"> Vật liệu xây dựng</td>
						<td><input type = "checkbox" id = "tvgtthucongmynghe"> Thủ công mỹ nghệ</td>
						<td><input type = "checkbox" id = "tvgtanduoc"> Ăn được</td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "tvgtcaydoc"> Cây độc</td>
						<td><input type = "checkbox" id = "tvgtchotinhdau"> Cho tinh dầu</td>
						<td><input type = "checkbox" id = "tvgtnhua"> Nhựa</td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "tvgtsoi"> Sợi</td>
						<td><input type = "checkbox" id = "tvgthuocnhuom"> Thuốc nhuộm</td>
						<td><input type = "checkbox" id = "tvgtcongdungkhac"> Công dụng khác</td>
					</tr>
					<tr>
						<td colspan="3" >Đặc điểm: <textarea id = "tvdacdiem" rows="3"> </textarea></td>				
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td>
							<input type = "button" value = "Thêm" id = "bttvthem" onclick="themTV();">
							<input type = "button" value = "Sửa" id = "bttvsua" onclick="suaTV();">
							<input type = "button" value = "Xóa" id = "bttvxoa">
						</td>
					</tr>
				</table>
			</td>
			<td valign="top">
				<table style="border:2px solid blue">
					<tr>
						<td>
							<div id="imaTV" style = "width: 100px; height: 130px;"></div> <br>
							<input type = "button" value = "..." onclick ="javascript:document.getElementById('imagefileTV').click();">
							<input id = "imagefileTV" style='display: none' type="file" /> <br>
							<input id = "loadImaTV" type = "button" value = "Load..." onclick = "loadImaTV();">
						</td>
					</tr>
				</table>
			</td>
		</tr>
		</table>
	</div>
	<div id="xoathucvat" style="font-size: 14px;">
		<p>Bạn muốn xóa?</p>
		<input type="radio" name="xoatv" id="tvxoamotcathe" checked="checked">Chỉ xóa một cá thể này.<br>
		<input type="radio" name="xoatv" id="tvxoaloai">Xóa tất cả cá thể của "Loài".<br>
		<input type="radio" name="xoatv" id="tvxoaho">Xóa tất cả cá thể của "Họ".<br>
		<input type="button" value = "Đồng ý" onclick = "xoaTV();">
		<input type="button" value = "Hủy" id="tvxoahuy">
	</div>
	
	<div id = "thongTinDV" style = "display: none;">
		<table>
			<tr>
				<td>
				<table>
					<tr>
						<td>Loài: <br><input type="text" id = "dvloai" ></td>
						<td>Họ: <br><input type="text" id = "dvho" ></td>
						<td>Giới: <br><input type="text" id = "dvgioi" ></td>
						
					</tr>
					<tr>
						<td>Ngành: <br><input type="text" id = "dvnganh" ></td>
						<td>Lớp: <br><input type="text" id = "dvlop" ></td>
						<td>Bộ: <br><input type="text" id = "dvbo" ></td>
					</tr>
					<tr>
						<td>Chi: <br><input type="text" id = "dvchi" ></td>
						<td colspan="2">Thức ăn: <br><input type="text" id = "dvthucan" ></td>
					</tr>
					<tr>
						<td>Vị trí:</td>
						<td>+ Latatude: <input type="text" id = "dvlatatude" ></td>
						<td>+ Longatude: <input type="text" id = "dvlongatude" ></td>
					</tr>
					<tr>
						<td>Nơi sống: </td>
						<td></td>
						<td></td>
					</tr>
					<tr>
						<td><input type = "checkbox" id = "dvnstrencan"> Trên cạn</td>
						<td><input type = "checkbox" id = "dvnstrencay"> Trên cây</td>
						<td><input type = "checkbox" id = "dvnsduoinuoc"> Dưới nước</td>
					</tr>
					<tr>
						<td colspan="3">Đặc điểm: <textarea id = "dvdacdiem" rows="3"> </textarea> </td>
					</tr>
					<tr>
						<td></td>
						<td></td>
						<td>
							<input type = "button" value = "Thêm" id = "btdvthem" onclick="themDV();">
							<input type = "button" value = "Sửa" id = "btdvsua" onclick="suaDV();">
							<input type = "button" value = "Xóa" id = "btdvxoa">
						</td>
					</tr>
				</table>
				</td>
				<td valign="baseline">
					<table style="border:2px solid blue">
						<tr>
							<td>
								<div id="imaDV" style = "width: 100px; height: 130px;"></div> <br>
								<input type = "button" value = "..." onclick ="javascript:document.getElementById('imagefileDV').click();">
								<input id = "imagefileDV" style='display: none' type="file" /> <br>
								<input id = "loadImaDV" type = "button" value = "Load..." onclick = "loadImaDV();">
							</td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
	</div>
	<div id="xoadongvat" style="font-size: 14px;">
		<p>Bạn muốn xóa?</p>
		<input type="radio" name="xoadv" id="dvxoamotcathe" checked="checked">Chỉ xóa một cá thể này.<br>
		<input type="radio" name="xoadv" id="dvxoaloai">Xóa tất cả cá thể của "Loài".<br>
		<input type="radio" name="xoadv" id="dvxoaho">Xóa tất cả cá thể của "Họ".<br>
		<input type="button" value = "Đồng ý" onclick = "xoaDV();">
		<input type="button" value = "Hủy" id="dvxoahuy">
	</div>
	
<script>
		$("#thucVatDialog").dialog({
			 autoOpen: false,
		     title: "Thực vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 1200,
		     height: 500
		});

		$("#dongVatDialog").dialog({
			 autoOpen: false,
		     title: "Động vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 1200,
		     height: 500
		}); 

		$("#sinhVatDialog").dialog({
			 autoOpen: false,
		     title: "Sinh vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 1200,
		     height: 500
		}); 

		$("#xoathucvat").dialog({
			 autoOpen: false,
		     title: "Quản lý thực vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 400
		});
		$("#bttvxoa").click(function() {
			$("#xoathucvat").dialog("open");
		});
		$("#tvxoahuy").click(function() {
			$("#xoathucvat").dialog("close");
		});

		$("#xoadongvat").dialog({
			 autoOpen: false,
		     title: "Quản lý động vật",
		     show: "blind",
		     hide: "explode",
		     modal: true,
		     width: 400
		});
		$("#btdvxoa").click(function() {
			$("#xoadongvat").dialog("open");
		});
		$("#dvxoahuy").click(function() {
			$("#xoadongvat").dialog("close");
		});
	</script>
</body>
</html>